html {
	cursor: url(""), auto;
	height: 100%;
	margin: auto;
	width: auto;
	box-sizing: border-box;
	cursor: url("Giant.cur"), auto;
}
body {	
	margin: 0;
	font-family: 'courier new';
	background-image: url("cloudbg.png");
	background-size: cover;
	background-repeat: no-repeat;
	overflow-x:hidden;
	padding-bottom: 50px;
	background-attachment: fixed;
}



ul.topnav {
	font-family: deltarune;
	font-size: 20px;
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	box-shadow: inset 0 0 15px rgba(135, 135, 135, 1), 0 0 18px 3px rgba(0, 0, 0, 1);
		text-align: center;
		justify-content: center;
}



ul.topnav li a {
	display: block;
	color: #f1f1f1;
	padding: 14px 40px;
	text-decoration: none;
	position: relative;
	color: white;
	text-shadow: 2px 2px 4px black;
	
}

ul.topnav li a:hover {
	box-shadow: inset 0 0 15px rgba(135, 135, 135, 1), 0 0 18px 3px rgba(0, 0, 0, 1);
	animation: 0.2s fadeIn;
	
}

ul.topnav li a:hover:after {
	content: url(starselect.gif);
	display: block;
	position: absolute;
	transform: scale(0.05);
	left: 0;
	right: 80%;
	top: -149px;
	z-index: 4;
}
.row {
	width: 1100px;
	margin:0 auto;
	position: relative;
		display: flex;
	flex-direction: row;
	text-align: center;
	margin-top: 10px;
	border: 5px solid #2a99f4;
}

.split-text-container {
	display: flex;
	font-size: 5rem;
	font-weight: bold;
	text-transform: lowercase;
	color: #fff;
	overflow: hidden;
	font-family: deltarune;
font-size: 35px;
background: #0061FF;
background: linear-gradient(0deg,rgba(0, 97, 255, 0.7) 100%);
width:250px;
}



.sacky-text-container {
	display: flex;
	font-size: 5rem;
	font-weight: bold;
	text-transform: lowercase;
	color: #fff;
	overflow: hidden;
	font-family: deltarune;
font-size: 35px;

}


.text-part.ghastly {
			transform: translateX(-500%);
		font-family: deltarune;
		color: white;
	overflow: hidden;
	border-right: 0.1em solid white;
	white-space: nowrap;
	margin: 0 auto;
	animation:
		typingghastly 2s steps(30, end),
		blink-caretart 1s step-end 1;
		opacity: 1;
		width: 0px;
		margin-left: -5px;

}

@keyframes typingghastly {
	0% { 
		transform: translateX(12%);
		width: 65%;
	}
	15% {
		transform: translateX(12%);
		width: 65%;
	}
	
	35% {
		transform: translateX(12%);
		width: 65%;
	}
	
	45% {
		transform: translateX(12%);
		width: 0%;
	}
	
	100% { 
	transform: translateX(12%);
	width: 0%;
	}
}

.text-part.sacky {
	transform: translateX(0%);
		font-family: deltarune;
		color: white;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 auto;
		
		opacity: 1;
		width: 160px;
		margin-left:0px;
		
		
		
}


@keyframes typingsacky {
		0% { 
		transform: translateX(-12%);
		width: 100%;
		opacity: 1;
	}
	
	80% { 
		transform: translateX(-12%);
		width: 100%;
		opacity: 1;
	}
	
	90% { 
	transform: translateX(-12%);
	width: 100%;
	opacity: 1;
	
	100% {
		transform: translateX(-12%);
	width: 100%;
	opacity: 1;
	}
	}
}


.text-part.about {
			transform: translateX(35%);
		font-family: deltarune;
		color: white;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 auto;
	animation:
		typingabout 2s steps(30, end);
		opacity: 1;
		width: 100px;
		z-index: 9999;

}

@keyframes typingabout {
			0% { width: 0%;
		opacity: 1;
	}
	
	20% {
		width: 0%;
	}
	
	50% { width: 0%;
	opacity: 1;
	}
	80% { width: 0%;
	opacity: 1;
	}
	
}
}

.text-part.sacky {
	transform: translateX(40%);
		font-family: deltarune;
		color: white;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 auto;
		
		opacity: 1;
		width: 0px;
		margin-left:0px;
}


@keyframes slide-in-left {
	0% {
		transform: translateX(-200%);
	}
	100% {
		transform: translateX(12%);
	}
}


@keyframes blink-caretsacky {
	from, to { border-color: transparent }
	50% { border-color: white; }
}

@keyframes blink-caretart {
	from, to { border-color: transparent }
50% { border-color: white; }
}



#aboutidle {
	color: #b7b7b7;
}

#introvert {
	font-family: deltarune;
	font-size: 25px;
	color: white;
	transform:  translate3d(0px, -50px, 0px);
}

.likesdislikes {
	width: 880px;
	height: 450px;
background: #000000;
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0.05) 100%);
}

h4#thx {
	opacity: 0.5;
	font-size: 15px;
}

#likes {
	font-family: deltarune;
	font-size: 25px;
	color: white;
	
	
	
}

#dislikes {
	font-family: deltarune;
	font-size: 25px;
	color: red;
}


@keyframes gradientAnim {
	0% {
		background-position: 200% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}





.column {
	float: left;
	height: 1000px;
	width: 250px;
}

#iceberg {
	position: absolute;
	width: 600px;
	height: 1000px;
	overflow: hidden;
	left: 0px;
	top: 0px;
	opacity: 0.5;
}


#pageheader {
	position: absolute;
	bottom: 425px;
	left: 57px;
}

#maybesubject {
	color: white;
}

#bsky {
	height: auto;
	width: 10%;
	transform:  translate3d(262px, -5px, 0px);
}

#desc2 {
	font-size: 34px;
	text-align: center;
	left: 50px;
	position: absolute;
	bottom: 160px;
}
#likes {
	position: absolute;
	left: 400px;
	color: #adff85;
}

#peakfiction  {
	font-family: deltarune;
	color: white;
	font-size: 20px;
}

#dislikes {
		position: absolute;
	right: 100px;
	color: #FF7878;
}

#music ul {
	transform:  translate3d(50px, 200px, 0px);
	display: inline-block;
	margin-bottom: 50px;
	font-family: deltarune;
	color: white;
}
#music h3 {
	transform:  translate3d(100px, 150px, 0px);
	display: inline-block;
}

#music img {
	display: inline-block;
}

#deltarune {
	transform:  translate3d(-650px, 270px, 0px);
}

#deltaruneback {
	transform:  translate3d(-540px, 260px, 0px);
}

#undertale {
	transform:  translate3d(200px, 180px, 0px);
}

#undertaleback {
	transform:  translate3d(310px, 170px, 0px);
}

#igor {
		transform:  translate3d(-750px, 290px, 0px);
}

#igorback {
	transform: translate3d(-630px, 280px, 0px);
}

#hawaii2 {
		transform:  translate3d(250px, 175px, 0px);
}

#hawaii2back {
	transform:  translate3d(360px, 165px, 0px);
}

#ye {
	transform:  translate3d(130px, 175px, 0px);
}

#yeback {
	transform:  translate3d(240px, 165px, 0px);
}

#what {
	transform:  translate3d(200px, 175px, 0px);
}
#whatback {
	transform:  translate3d(200px, 165px, 0px);
}

#inside {
	transform:  translate3d(-620px, 292px, 0px);
}
#insideback {
	transform:  translate3d(-510px, 282px, 0px);
}

#music {
	height: 200px;
	width: 1000px;
	text-align: left;
		transform:  translate3d(0px, -20px, 0px);
	
}

#description {
	position: absolute;
	top: 315px;
	left: -30px;
	width: 300px;
	text-align: left;
	font-family: deltarune;
	color: white;
}

.column h2{
	font-family: deltarune;
	font-size: 45px;
	color: white;
	transform:  translate3d(0px, -5px, 0px);
}

#whoru {
		transform:  translate3d(0px, 0px, 0px);
}

#desc {
	font-family: deltarune;
	font-size: 20px;
	color: white;
	width: 700px;
	transform:  translate3d(100px, -30px, 0px);
}

#thx {
	font-size: 12px;
	color: white;
	transform:  translate3d(0px, -40px, 0px);
}

#rabbithole{
		transform:  translate3d(0px, 560px, 0px);
		margin-top: 0px;
}

h2#intereststext {
		font-size: 30px;
			color: white;
			margin-top: 30px;
}

#rabbithole:hover {
	transform:  translate3d(0px, 560px, 0px);
	margin-top: 0px;
	overflow: hidden;
	background: black;
	animation: fadeIn 0.2s linear;
}

#intereststext:hover {
	font-size: 30px;
	color: transparent;
	background-clip: text;
background-image: linear-gradient(90deg, rgba(159, 29, 179, 1) 0%, rgba(21, 21, 140, 1) 47%, rgba(82, 192, 255, 1) 100%);
animation: fadeIn 0.2s linear;
}

a {
	
	text-decoration: none;
	
}

#hi {
	font-family: deltarune;
		font-size: 55px;
	color: white;
	transform:  translate3d(-150px, -40px, 0px);

}

.left {

	text-align: center;
}

.middle {
	width: 80%;
	text-align: center;
}

.row:after {
	content: "";
	display: flex;
	clear: both;
	
}

.container img {
		object-fit: fill;
}
.container .backboard img {
	padding: 0px;
	width: 250px;
	height: auto;
	position: absolute;
	margin-left: -125px;
	display: absolute;
}

.container img {
	padding: 0px;
	width: 250px;
	height: auto;
	position: absolute;
	margin-left: -5px;
	margin-bottom: 600px;
	display: absolute;
}

.container .id img {
	padding: 0px;
	transition: transform .2s;
	width: 250px;
	height: auto;
	position: absolute;
	margin-left: -125px;
	display: absolute;
}
.container .id img:hover {
	cursor: url("middle finger.cur"), auto;
	margin-left: -125px;
	transform:  translate3d(0px, 140px, 0px);
	border: solid #F5E2AE 2px;
	width: 246px;
	height: auto;
}

@keyframes fadeIn {
	0%{ opacity: 0;}
	100%{ opacity: 1;}
	}

.fadeIn-animation {
	animation: 1s fadeIn;
}

.scroll  {
	font-family: 'Workbench';
	font-size: 2em;
	color: white;
	line-height: 10px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 1300px;
	margin: 0 auto;
	border: solid gray 5px;
	background-color: black;
	
}

.bio {
	color: white;
	text-shadow: black 2px 1px 2px;
	text-align:center;
	z-index: 1;
	transform:  translate3d(0px, -420px, 0px);
	width: 1000px;
	font-size: 18px;
}


.RightToLeft p {
	animation: RightToLeft 2s linear infinite;
	
}
.LeftToRight  {
	animation: LeftToRight 2s linear infinite;
	display: flex;
	justify-content:center;
}

@keyframes LeftToRight {
	0% {
		transform: translateX(-184px);
	}
	100% {
		transform: translateX(280px);
	}
}
@keyframes RightToLeft {
0% {
		transform: translateX(4px);
	}
	100% {
		transform: translateX(-220px);
	}
}

@keyframes RightToLeft2 {
0% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(10%);
	}
}


@font-face {
	font-family: deltarune;
	src: url(DTM-Sans.otf);
}

#music-border {
	position: fixed;
	width:240px;
	height:80px;
	bottom: 0;
	left:0;
	
}

.slider-song {
	position: fixed;
	margin-bottom: 10px;
	margin-left: 80px;
	accent-color: white;
	height: 15px;
	width: 140px;
	display: flex;
	flex-direction: column;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	bottom: 0;
}

#song-image {
   	position: fixed;
	width:230px;
	height:66.5px;
	opacity: 0;
	bottom: 6.8px;
	left:5px;
	z-index: 1;
}


#dog-img {
	position: fixed;
	width:125px;
	height:auto;
	bottom: 0;
	transform: translate3d(-15px, -7px, 0px);
	left:0;
	z-index:2;
}

#slider-song {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	position: fixed;
	width:135px;
	height:1px;
	bottom: 0;
	transform: translate3d(87px, -34px, 0px);
	left:0;
	    border-radius: 0px;
	    border: 2px solid #8694b7;
		z-index:2;
	
}

#slider-song::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: white;
    width: 10px;
    height: 10px;
   
}


@keyframes song-name {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-280%);
	}
}

.song-name {
	position: fixed;
	font-family: deltarune;
	font-size: 20px;
	color: white;
	padding: 0px;
	overflow: hidden;
	z-index: 1;
	bottom: 38px;
	margin-left: 55px;
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 30px;
	width: 180px;
}

#nope {
	width: 20px;
	height: 20px;
}

#nope :hover {
	opacity:0 ;
}

#song-name {
animation: song-name 6s infinite linear;
}

#song-artist {
	font-family: deltarune;
	font-size: 15px;
	color: white;
	transform: translate3d(-85px, -55px, 0px);
}
	
	#background-music {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 375px;
	height: 50px;
	background: white;
	transform: translate3d(0px, -75px, 0px);
	;
}

@keyframes song-name-animation {
	from {
		
	}
	to {
		left: 0;
	transform: translateX(-100%);
	}
}


	.footer #icons {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 50px;
	}
	
	.footer #icons img {
		width: 150px;
		height: auto;
		
		
	}
	



@media screen and (max-width: 1200px) {
	.column {
	width: 100%;
	}
	
	.footer {
		
}
}

.column {
background: #00121c;
background: linear-gradient(0deg, rgba(0, 18, 28, 1) 0%, rgba(0, 33, 51, 1) 16%, rgba(0, 66, 133, 1) 30%, rgba(25, 125, 224, 1) 79%, rgba(0, 136, 255, 1) 100%);
}

.footer h2 {
	color: white;
	text-align: center;
	
}

#music-player {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


div#music-buttons {
    display: flex;
    align-items: center;
	z-index: 6;
	

}


#music-buttons i {
	
}

#music-buttons {
	position: fixed;
	width: 0px;
	height: auto;
	right:700px;
	bottom:30px;
	left: 109px;
	cursor: pointer;

}


#music-buttons img {
	width: 20px;
	height: auto;
}

i {
	max-height: 0px;
	min-height: 0px;
	padding-right:20px;
}

#pfp {
	position: absolute;
	height: 220px;
	width: auto;
	left: 10px;
	top:80px;
	top:80px;
	border: 5px solid #2a99f4;
}